
<template>
  <!-- // 某台主机详细信息 -->
  <!-- // etailed information -->
  <div class="etailed-host">
    <div id="mychart" style="width:100%; height: 400px;"></div>
  </div>
</template>

<script>
import  echarts from 'echarts';
export default {
  name: "EtailedHost",
  data() {
    return {
      myChart:null,
       // 3. 指定图表的配置项和数据
      option: {
		    // backgroundColor: ragb(0, 0, 0, 0),
		    tooltip : {
		        formatter: "{a} <br/>{c} {b}"
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    series : [
		        {
		            name:'CPU',
		            type:'gauge',
		            min:0,
		            max:100,
		            splitNumber:10,
		            radius: '80%',
		            axisLine: {            // 坐标轴线
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
		                    width: 3,
		                    shadowColor : '#fff', //默认透明
		                    shadowBlur: 10
		                }
		            },
		            axisLabel: {            // 坐标轴小标记
		                textStyle: {       // 属性lineStyle控制线条样式
		                    fontWeight: 'bolder',
		                    color: '#fff',
		                    shadowColor : '#fff', //默认透明
		                    shadowBlur: 10
		                }
		            },
		            axisTick: {            // 坐标轴小标记
		                length :15,        // 属性length控制线长
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: 'auto',
		                    shadowColor : '#fff', //默认透明
		                    shadowBlur: 10
		                }
		            },
		            splitLine: {           // 分隔线
		                length :25,         // 属性length控制线长
		                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
		                    width:3,
		                    color: '#fff',
		                    shadowColor : '#fff', //默认透明
		                    shadowBlur: 10
		                }
		            },
		            pointer: {           // 分隔线
		                shadowColor : '#fff', //默认透明
		                shadowBlur: 5
		            },
		            title : {
		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    fontWeight: 'bolder',
		                    fontSize: 20,
		                    fontStyle: 'italic',
		                    color: '#fff',
		                    shadowColor : '#fff', //默认透明
		                    shadowBlur: 10
		                }
		            },
		            detail : {
		                backgroundColor: 'rgba(30,144,255,0.8)',
		                borderWidth: 1,
		                borderColor: '#fff',
		                shadowColor : '#fff', //默认透明
		                shadowBlur: 5,
		                offsetCenter: [0, '50%'],       // x, y，单位px
		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    fontWeight: 'bolder',
		                    color: '#fff'
		                },
		                formatter:'{value}%'
		            },
		            data:[{value: 40, name: 'CPU利用率'}]
		        },
		        {
		            name:'内存',
		            type:'gauge',
		            center : ['25%', '50%'],    // 默认全局居中
		            radius : '50%',
		            min:0,
		            max:100,
		            endAngle:45,
		            splitNumber:5,
		            axisLine: {            // 坐标轴线
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
		                    width: 2,
		                    shadowColor : '#fff', //默认透明
		                    shadowBlur: 10
		                }
		            },
		            axisLabel: {            // 坐标轴小标记
		                textStyle: {       // 属性lineStyle控制线条样式
		                    fontWeight: 'bolder',
		                    color: '#fff',
		                    shadowColor : '#fff', //默认透明
		                    // shadowBlur: 0
		                }
		            },
		            axisTick: {            // 坐标轴小标记
		                length :12,        // 属性length控制线长
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: 'auto',
		                    shadowColor : '#fff', //默认透明
		                    // shadowBlur: 0
		                }
		            },
		            splitLine: {           // 分隔线
		                length :20,         // 属性length控制线长
		                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
		                    width:3,
		                    color: '#fff',
		                    shadowColor : '#fff', //默认透明
		                    // shadowBlur: 0
		                }
		            },
		            pointer: {
		                width:5,
		                shadowColor : '#fff', //默认透明
		                shadowBlur: 5
		            },
		            title : {
		                offsetCenter: [0, '-30%'],       // x, y，单位px
		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                    fontWeight: 'bolder',
		                    fontStyle: 'italic',
		                    color: '#fff',
		                    shadowColor : '#fff', //默认透明
		                    shadowBlur: 10
		                }
		            },
		            detail : {
		                //backgroundColor: 'rgba(30,144,255,0.8)',
		               // borderWidth: 1,
		                // borderColor: '#fff',
		                // shadowColor : '#fff', //默认透明
		                // shadowBlur: 5,
		                // width: 80,
		                // height:30,
		                // offsetCenter: [25, '20%'],       // x, y，单位px
		                // textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
		                //     fontWeight: 'bolder',
		                //     color: '#fff'
		                // },
		                formatter:'{value}%'
		            },
		            data:[{value: 1.5, name: '内存'}]
		        },
		        {
		            name:'硬盘',
		            type:'gauge',
		            center : ['75%', '50%'],    // 默认全局居中
		            radius : '50%',
		            min:0,
		            max:100,
		            startAngle:135,
		            endAngle:-45,
		            splitNumber:5,
		            axisLine: {            // 坐标轴线
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
		                    width: 2,
		                    shadowColor : '#fff', //默认透明
		                    shadowBlur: 10
		                }
		            },
		            axisTick: {            // 坐标轴小标记
		                length :12,        // 属性length控制线长
		                lineStyle: {       // 属性lineStyle控制线条样式
		                    color: 'auto',
		                    shadowColor : '#fff', //默认透明
		                    // shadowBlur: 10
		                }
		            },
		            axisLabel: {
		                textStyle: {       // 属性lineStyle控制线条样式
		                    fontWeight: 'bolder',
		                    color: '#fff',
		                    shadowColor : '#fff', //默认透明
		                    // shadowBlur: 10
		                },
		                // formatter:function(v){
		                //     switch (v + '') {
		                //         case '0' : return 'E';
		                //         case '1' : return '硬盘';
		                //         case '2' : return 'F';
		                //     }
		                // }
		            },
		            splitLine: {           // 分隔线
		                length :15,         // 属性length控制线长
		                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
		                    width:3,
		                    color: '#fff',
		                    shadowColor : '#fff', //默认透明
		                    // shadowBlur: 10
		                }
		            },
		            pointer: {
		                width:5,
		                shadowColor : '#fff', //默认透明
		                shadowBlur: 5
		            },
		            title : {
		                show: false
		            },
		            detail : {
		                // show: false
		                 formatter:'{value}%'
		            },
		            data:[{value: 0.5, name: '硬盘'}]
		        },
		        // {
		        //     name:'水表',
		        //     type:'gauge',
		        //     center : ['75%', '50%'],    // 默认全局居中
		        //     radius : '30%',
		        //     min:0,
		        //     max:2,
		        //     startAngle:315,
		        //     endAngle:225,
		        //     splitNumber:2,
		        //     axisLine: {            // 坐标轴线
		        //         lineStyle: {       // 属性lineStyle控制线条样式
		        //             color: [[0.2, 'lime'],[0.8, '#1e90ff'],[1, '#ff4500']],
		        //             width: 2,
		        //             shadowColor : '#fff', //默认透明
		        //             shadowBlur: 10
		        //         }
		        //     },
		        //     axisTick: {            // 坐标轴小标记
		        //         show: false
		        //     },
		        //     axisLabel: {
		        //         textStyle: {       // 属性lineStyle控制线条样式
		        //             fontWeight: 'bolder',
		        //             color: '#fff',
		        //             shadowColor : '#fff', //默认透明
		        //             shadowBlur: 10
		        //         },
		        //         formatter:function(v){
		        //             switch (v + '') {
		        //                 case '0' : return 'H';
		        //                 case '1' : return 'Water';
		        //                 case '2' : return 'C';
		        //             }
		        //         }
		        //     },
		        //     splitLine: {           // 分隔线
		        //         length :15,         // 属性length控制线长
		        //         lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
		        //             width:3,
		        //             color: '#fff',
		        //             shadowColor : '#fff', //默认透明
		        //             shadowBlur: 10
		        //         }
		        //     },
		        //     pointer: {
		        //         width:2,
		        //         shadowColor : '#fff', //默认透明
		        //         shadowBlur: 5
		        //     },
		        //     title : {
		        //         show: false
		        //     },
		        //     detail : {
		        //         show: false
		        //     },
		        //     data:[{value: 0.5, name: 'gas'}]
		        // }
		    ]
		  }
    }
  },
  created() {
    this.test();
  },
  mounted() {
    this.test();
  },
  methods: {
    test() {
      this.myChart = echarts.init(document.getElementById("mychart"));
      this.myChart.setOption(this.option);
      setInterval(() => {
        this.option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
        this.option.series[1].data[0].value = (Math.random()*100).toFixed(2) - 0;
        this.option.series[2].data[0].value = (Math.random()*100).toFixed(2) - 0;
        // option.series[3].data[0].value = (Math.random()*2).toFixed(2) - 0;
        this.myChart.setOption(this.option);
        // console.log(this.myChart);
      },3000)
    }
  }
}
</script>

<style scoped="scoped" lang="scss">
</style>
